<template>
    <!--项目介绍-->
    <el-row :gutter="20" v-show="show">
        <el-col :span="10">
            <el-card shadow="never" class="full-card" style="height: 700px;">
                <div slot="header" class="index-card-title flex" style="justify-content: space-between; align-items: center;">
                    <div>项目介绍</div>
                    <div>
                        <el-button type="text" @click="show=false">关闭</el-button>
                    </div>
                </div>
                <div>
                    <div class="flex-column" style="align-items: center;margin-bottom: 12px;">
                        <el-image :src="require('@/assets/logo.png')" style="width: 100px;height: auto;"/>
                        <span style="font-size: 24px;font-weight: bolder;">健康码项目（前后端分离）</span>
                    </div>

                    <el-table
                        border
                        :data="projectList"
                    >
                        <el-table-column
                            v-for="item in projectListColumns"
                            :label="item.name" :prop="item.prop"
                        >
                            <div slot-scope="{row}" v-html="row[item.prop]">
                                <!--{{row[item.prop]}}-->
                            </div>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-col>
        <el-col :span="14">
            <el-card shadow="never" class="full-card" style="height: 360px;">
                <div slot="header" class="index-card-title">
                    <span>项目背景 / 应用场景 / 优势</span>
                </div>
                <div style="font-size: 14px;">
                    <div >
                        <span class="p-title">项目背景：</span>
                        <div style="text-indent: 2em;">
                            本人目前是一名后端程序员，但是对前端的一些知识也略知一二。所以从0到1做了这一套健康码项目供后续学习、参考，三个端的项目从新建到完善都由本人亲手完成，代码比较简单，适合新手上手学习。
                        </div>
                        <div style="text-indent: 2em;">
                            这个项目花了比较多的时间在整体框架上，包括：后端接口统一返回格式、前端请求统一封装接口拦截、后台管理系统整体框架优化、菜单路由配置简单化等。 整体项目基础框架已经完善，但是只实现了部分的业务功能。
                        </div>
                    </div>

                    <div style="margin-top: 6px;">
                        <span class="p-title">优势：</span>
                        <div>
                            <div>1. 从0到1，代码简单：帮助你更快了解前后端项目是怎么新建、配置、开发的</div>
                            <div>2. 元素齐全，前后端分离、vue、uniapp、springBoot、大数据展示平台等，通过这个项目都能了解到</div>
                            <div>3. 结构简约：遵循大部分统一的开发规则，方便理解项目的构成</div>
                            <div>4. 新手把这个项目上手理解后，对后续有很大帮助</div>
                        </div>
                    </div>

                    <div style="margin-top: 6px;">
                        <span class="p-title">应用场景：</span>
                        <div>
                            <div >1. 在校大学生：毕业设计作品参考</div>
                            <div >2. 想成为全栈的程序员</div>
                            <div >3. 接私活的个人开发者：提升个人全栈开发的能力</div>
                        </div>
                    </div>
                </div>
            </el-card>

            <el-row :gutter="20">
                <el-col :span="16">
                    <el-card shadow="never" class="full-card" style="height: 330px;margin-top: 10px;">
                        <div slot="header" class="index-card-title">
                            <span>捐赠/打赏 - 如果觉得有帮助，可以支持一下</span>
                        </div>
                        <div class="flex" style="justify-content: space-evenly;">
                            <div>
                                <el-image :src="require('@/assets/test/zsq-wx-code.png')" style="width: auto;height: 100%;"/>
                            </div>
                            <div>
                                <el-image :src="require('@/assets/test/zsq-zfb-code.jpg')" style="width: auto;height: 100%;"/>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="8">
                    <el-card shadow="never" class="full-card" style="height: 330px;margin-top: 10px;">
                        <div slot="header" class="index-card-title">
                            <span>关注微信公众号</span>
                        </div>
                        <div style="text-align: center;">
                            <el-image :src="require('@/assets/test/zsq-wx-gzh.jpg')" style="width: 200px;height: auto;"/>
                            <div><i style="color: green;font-size: 18px;" class="el-icon-chat-dot-round"></i>关注我查看更多开源项目、技术文章</div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                show: true,
                projectList: [
                    {
                        p1: `<p>Uniapp： 一套代码，支持多端部署，支持打包成H5、微信小程序、Android、IOS等</p> <p> Vue2、Vuex：状态管理</p> <p>uView 2.0 组件库：已全面兼容nvue</p>
                             <p>luch-request：基于该库封装了http接口请求，调用后台接口变得方便简单、易于维护</p>
                             <p>tki-qrcode：二维码生成图片库</p>
                            `,
                        p2: `<p>Vue2、Vuex、Vue-Router...：vue全家桶</p>
                            <p>Element UI：组件库</p>
                            <p>Axios：http请求库，基于该库封装接口请求</p>
                            <p>Echarts5：数据图表库，用于大数据平台、统计数据的图表显示</p>
                        `,
                        p3: `<p>JDK1.8、MySQL5.7</p>
                             <p>SpringBoot2： MVC框架</p>
                             <p>MyBatis Plus： 数据库持久层</p>
                             <p>sa-token： 登录鉴权框架</p>
                             <p>magic-api： 接口快速开发框架，不需要写controller、service、dao层即可实现接口服务</p>
                        `
                    }
                ],
                projectListColumns: [
                    {name: 'Uniapp 小程序端', prop: 'p1'},
                    {name: 'Vue 后端管理端', prop: 'p2'},
                    {name: 'SpringBoot 接口服务', prop: 'p3'},
                ],
            }
        }
    }
</script>

<style scoped>
    .p-title{
        font-weight: bolder;
    }
</style>
